@tailwind base;
@tailwind components;
@tailwind utilities;


.container-view {
    @apply container;
    @apply grow;
    @apply flex flex-col;
    @apply w-full;
    @apply min-h-full;
    @apply bg-base-200/40;
    @apply py-6 mx-auto;
    @apply rounded;
    @apply border;
}

.container-view-header {
    @apply mb-4;
    @apply px-8;

    h1 {
        @apply mb-6;
        @apply text-2xl;
        @apply font-bold;
    }
}

.container-view-main {
    @apply grow;
    @apply w-full min-h-48;
    @apply border;
    @apply bg-base-100;
    @apply overflow-hidden;

    table {
        @apply table;
        @apply w-full;
        @apply bg-base-100;
        @apply divide-y;

        thead {
            @apply bg-base-200/50;
        }

        tbody {
            @apply bg-base-100;
            @apply divide-y;
        }

        th {
            @apply px-6 py-3;
            @apply text-base-content/80;
            @apply text-base text-center font-bold;
            @apply uppercase;
            @apply tracking-wider;
        }

        td {
            @apply px-6 py-4;
            @apply text-center;

            a,
            p,
            span {
                @apply truncate;
            }
        }
    }
}

.container-view-footer {
    @apply mt-6;
    @apply px-8;
    @apply w-full;
    @apply flex flex-wrap;
    @apply justify-between items-center;
}
